<ng-container>
    <div class="content">
        <div class="ui form">
            <h3 class="inline">{{ 'workflow_node_hook_form_title' | translate }}</h3>
            <div class="right floated mb15">
                <i class="book icon"></i><a href="https://ovh.github.io/cds/docs/concepts/workflow/hooks/" target="_blank">{{'common_documentation' | translate}}</a>
            </div>
            <ng-container *ngIf="!loadingModels">
                <sui-select class="selection" placeholder="{{'workflow_node_hook_select' | translate}}"
                            [(ngModel)]="selectedHookModel"
                            (ngModelChange)="updateHookModel()"
                            [options]="hooksModel"
                            [isSearchable]="true"
                            [isDisabled]="hook.uuid || mode === 'ro'"
                            labelField="name" #select>
                    <sui-select-option *ngFor="let option of select.filteredOptions" [value]="option">{{option.name}}
                    </sui-select-option>
                </sui-select>
            </ng-container>
            <ng-container *ngIf="loadingModels">
                <sui-select class="selection" placeholder="{{'common_loading' | translate}}">
                    <sui-select-option value="">{{'common_loading' | translate}}</sui-select-option>
                </sui-select>
            </ng-container>
            <div class="inline fields uuid" *ngIf="_hook.uuid">
                <div class="four wide field"><label>UUID</label></div>
                <div class="twelve wide field">
                    <input type="text" value="{{hook.uuid}}" disabled>
                </div>
            </div>
            <ng-container *ngIf="_hook.model && displayConfig">
                <ng-container *ngIf="_hook.config && _hook.model.name !== 'Workflow'">
                    <h3>{{ 'workflow_node_hook_form_config' | translate }}</h3>
                    <div class="inline fields" *ngFor="let k of hook.config | keys">
                        <div class="four wide field"><label>{{k}}</label></div>
                        <div class="twelve wide field">
                            <!-- STRING -->
                            <ng-container *ngIf="k !== 'payload' && (_hook.config[k].type === 'string' || !_hook.config[k].type)">
                                <input type="text" [(ngModel)]="_hook.config[k].value" [readonly]="!_hook.config[k].configurable || mode === 'ro'"/>
                            </ng-container>
                            <!-- PASSWORD -->
                            <ng-container  *ngIf="k !== 'payload' && _hook.config[k].type === 'password'">
                                <input type="password" [(ngModel)]="_hook.config[k].value"
                                       [readonly]="!_hook.config[k].configurable || mode === 'ro'"/>
                            </ng-container>
                            <!-- MULTICHOICE -->
                            <ng-container *ngIf="k !== 'payload' && _hook.config[k].type === 'multiple'">
                                <div class="ui form">
                                    <div class="grouped fields">
                                        <div class="ui grid">
                                            <div class="five wide column" *ngFor="let eventType of _hook.config[k].multiple_choice_list">
                                                <ng-container *ngIf="_hook.config[k].temp">
                                                    <sui-checkbox [(ngModel)]="_hook.config[k].temp[eventType]" (checkChange)="updateHookMultiChoice(k)">{{eventType}}</sui-checkbox>
                                                </ng-container>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </ng-container>

                            <!-- PAYLOAD -->
                            <ng-container *ngIf="k === 'payload' && _hook.config[k].type === 'string'">
                                <codemirror
                                    [class.invalid]="invalidJSON"
                                    [(ngModel)]="_hook.config[k].value"
                                    [config]="codeMirrorConfig"
                                    (change)="changeCodeMirror($event)"
                                    #textareaCodeMirror>
                                </codemirror>
                            </ng-container>
                            <ng-container *ngIf="_hook.config[k].type === 'integration'">
                                <sui-select class="selection" placeholder="{{'integration_name' | translate}}"
                                            [(ngModel)]="selectedIntegration"
                                            (ngModelChange)="updateIntegration()"
                                            [options]="availableIntegrations"
                                            [isSearchable]="true"
                                            labelField="name" #select>
                                    <sui-select-option *ngFor="let option of select.filteredOptions" [value]="option">{{option.name}}
                                    </sui-select-option>
                                </sui-select>
                            </ng-container>
                        </div>
                    </div>
                </ng-container>
                <div class="ui info message" *ngIf="!_hook.config">{{ 'workflow_node_hook_no_configuration' | translate }}</div>
            </ng-container>

            <button class="ui right floated green button" type="button" *ngIf="mode === 'update'" (click)="updateHook()"
                    [disabled]="loading || (workflow.from_repository && workflow.from_repository.length > 0)" [class.loading]="loading">
                {{ 'btn_save' | translate }}
            </button>
        </div>
    </div>
</ng-container>
